<template>
	<view class="container">
		<!-- 基本信息 -->
		<view class="basicInfo">
			<view class="title">
				基本信息
			</view>
			<view class="infoContent">
				<view class="infoItem">
					<view class="key">
						企业类型
					</view>
					<view class="value">
						<view class="btnGroup">
							<view :class="certifyInfo.serverUserAccountInfoCompanyType === 1 ? 'selected' : 'default'"
								@click="selectBusinessType(1)">
								个体工商户
							</view>
							<view :class="certifyInfo.serverUserAccountInfoCompanyType === 2 ? 'selected' : 'default'"
								@click="selectBusinessType(2)">
								企业
							</view>



						</view>

					</view>
				</view>

				<view class="infoItem">
					<view class="key">
						公司名称
					</view>
					<view class="value">
						<input type="text" placeholder="请输入公司名称"
							v-model="certifyInfo.serverUserAccountInfoCompanyName" />
					</view>
				</view>

				<view class="infoItem">
					<view class="key">
						营业执照编号
					</view>
					<view class="value">
						<input type="text" placeholder="请输入营业执照编号"
							v-model="certifyInfo.serverUserAccountInfoBusinessLicenseNumber" />
					</view>
				</view>

				<view class="infoItem">
					<view class="key">
						上传营业执照
					</view>
					<view class="value">
						<view class="uploadCertify" @click="upLoadCertifyLicense()">
							{{uploadStatus}}
						</view>
					</view>
				</view>


			</view>
		</view>

		<!-- 联系人信息 -->
		<view class="contactInfo">
			<view class="title">
				联系人信息
			</view>
			<view class="infoContent">
				<view class="infoItem">
					<view class="key">
						联系人姓名
					</view>
					<view class="value">
						<input type="text" v-model="certifyInfo.serverUserAccountInfoContactName"
							placeholder="请填写联系人真实姓名" />
					</view>
				</view>
				<view class="infoItem">
					<view class="key">
						手机号码
					</view>
					<view class="value">
						<input type="number" v-model="certifyInfo.serverUserAccountInfoTel" placeholder="请填写手机号码" />
					</view>
				</view>
				<view class="infoItem">
					<view class="key">
						电子邮箱
					</view>
					<view class="value">
						<input type="text" v-model="certifyInfo.serverUserAccountInfoEmail" placeholder="请填写邮箱号码（选填）" />
					</view>
				</view>
			</view>
		</view>

		<!-- 公户信息 -->
		<view class="accountInfo">
			<view class="title">
				公户信息
			</view>
			<view class="infoContent">
				<view class="infoItem">
					<view class="key">
						账户名称
					</view>
					<view class="value">
						<input type="text" v-model="certifyInfo.serverUserAccountInfoCorporateName"
							placeholder="请填写收款方账户名称" />
					</view>
				</view>
				<view class="infoItem">
					<view class="key">
						账户号码
					</view>
					<view class="value">
						<input type="text" v-model="certifyInfo.serverUserAccountInfoCorporateNumber"
							placeholder="请填收款方账户号码" />
					</view>
				</view>
				<view class="infoItem">
					<view class="key">
						开户银行
					</view>
					<view class="value">
						<input type="text" v-model="certifyInfo.serverUserAccountInfoBank" placeholder="请填写开户银行名称" />
					</view>
				</view>
			</view>
		</view>

		<!-- 提交并认证按钮 -->
		<view class="confirmBtn" @click="confirmCertifyInfo()">
			提交并认证
		</view>
	</view>

</template>

<script>
	import * as commssionApi from '@/api/commssion/commssion.js'
	export default {
		data() {
			return {
				certifyInfo: {
					certificationType: 1,
					serverUserAccountInfoCompanyType: 1,
					// 企业类型
					serverUserAccountInfoCompanyName: '',
					serverUserAccountInfoBusinessLicenseNumber: '',
					serverUserAccountInfoBusinessLicenseUrl: null,
					serverUserAccountInfoContactName: '',
					serverUserAccountInfoTel: '',
					serverUserAccountInfoEmail: '',
					serverUserAccountInfoCorporateName: '',
					serverUserAccountInfoCorporateNumber: '',
					serverUserAccountInfoBank: ''
				},
				// 判断是首次认证还是重新认证




			};
		},
		onLoad(options) {
			const paramsStr = options.params || null; // 获取URL查询参数中的params字段
			//接收个人中心传来的订单类型
			if (paramsStr != null) {
				const receivedParams = JSON.parse(paramsStr);
				this.certifyInfo.certificationType = receivedParams.toCertifyType;
				console.log("是否重新认证")
				console.log(this.certifyInfo.certificationType)
			}
		},
		computed: {
			//营业执照是否上传
			uploadStatus() {
				if (this.certifyInfo.serverUserAccountInfoBusinessLicenseUrl != null) {
					return '已上传';
				} else {
					return '点击上传 +'
				}

			}
		},
		methods: {
			//选择认证状态
			selectBusinessType(type) {
				console.log(type)
				this.certifyInfo.serverUserAccountInfoCompanyType = type;
			},

			//上传营业执照的的方法
			async upLoadCertifyLicense() {
				
				const url = await uni.$chooseImage();
				if (url != null) {
					uni.hideLoading()
					uni.$showMsg('上传成功')
				}
				this.certifyInfo.serverUserAccountInfoBusinessLicenseUrl = url;
				console.log(this.certifyInfo.serverUserAccountInfoBusinessLicenseUrl)
			},

			//校验函数
			validateCertifyInfo(certifyInfo) {
				// 非空校验
				if (!certifyInfo.serverUserAccountInfoCompanyName) {
					return '请填写公司名称';
				}
				if (!certifyInfo.serverUserAccountInfoBusinessLicenseNumber) {
					return '请填写营业执照编号';
				}
				if (!certifyInfo.serverUserAccountInfoBusinessLicenseUrl) {
					return '请上传营业执照';
				}
				if (!certifyInfo.serverUserAccountInfoContactName) {
					return '请填写联系人姓名';
				}
				if (!certifyInfo.serverUserAccountInfoTel) {
					return '请填写手机号码';
				}
				if (!certifyInfo.serverUserAccountInfoCorporateName) {
					return '请填写账户名称';
				}
				if (!certifyInfo.serverUserAccountInfoCorporateNumber) {
					return '请填写账户号码';
				}
				if (!certifyInfo.serverUserAccountInfoBank) {
					return '请填写开户银行名称';
				}

				// 手机号合法性校验
				const telReg = /^1[3456789]\d{9}$/;
				if (!telReg.test(certifyInfo.serverUserAccountInfoTel)) {
					return '请输入有效手机号';
				}

				// 所有校验通过
				return null;
			},



			//提交并认证
			async confirmCertifyInfo() {

				const validationResult = this.validateCertifyInfo(this.certifyInfo);
				if (validationResult) {
					return uni.$showMsg(validationResult);
				}

				const res = await commssionApi.uploadCertifyInfo(this.certifyInfo);
				console.log("认证反馈信息")
				console.log(res)
				if (res.data.code == 200) {
					uni.$showMsg('提交成功')
					uni.$toPage('/subpkg/ServiceProvider/certifytransferPage/certifytransferPage',{},false,false,true)
				} else return uni.$showMsg('提交失败，请稍后重试')

			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;

		// 基本信息  
		.basicInfo {
			position: relative;
			margin-bottom: 20rpx;
			margin-top: 12rpx;
			box-sizing: border-box;
			width: 694rpx;
			height: 446rpx;
			opacity: 1;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);


			.title {
				margin-top: 40rpx;
				margin-left: 30rpx;
				margin-bottom: 30rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);

			}

			.infoContent {
				margin-left: 30rpx;

				.infoItem {
					display: flex;
					align-items: center;

					margin-bottom: 40rpx;

					.key {

						font-weight: 400;
						color: rgba(82, 82, 84, 1);
						font-size: 32rpx;
					}

					.value {
						position: absolute;
						left: 265rpx;
						color: rgba(151, 151, 151, 1);
						font-weight: 400;
						

						.btnGroup {
							display: flex;
							
							
							

							.selected {
								color: white;
								background: rgba(223, 161, 60, 1);
								font-size: 28rpx;
								font-weight: 500;
								letter-spacing: 0rpx;
								line-height: 40.54rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 28rpx;
								box-sizing: border-box;
								height: 48rpx;
								opacity: 1;
								border-radius: 14rpx;
								padding: 2rpx 24rpx;
								margin-right: 20rpx;
							}

							.default {
								font-size: 28rpx;
								font-weight: 500;
								letter-spacing: 0rpx;
								line-height: 40.54rpx;
								color: rgba(0, 0, 0, 1);
								background: rgba(237, 233, 228, 1);
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 28rpx;
								box-sizing: border-box;
								height: 48rpx;
								opacity: 1;
								border-radius: 14rpx;
								padding: 2rpx 24rpx;
								margin-right: 20rpx;
							}

						}

						.uploadCertify {
							box-sizing: border-box;
							width: 380rpx;
							height: 48rpx;
							opacity: 1;
							border-radius: 8rpx;
							background: rgba(243, 243, 245, 1);
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 24rpx;
							color: rgba(223, 161, 60, 1);
						}
					}
				}
			}
		}

		// 联系人信息  
		.contactInfo {
			position: relative;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			width: 694rpx;
			height: 398rpx;
			opacity: 1;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);

			.title {
				margin-bottom: 42rpx;
				margin-top: 42rpx;
				margin-left: 30rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}

			.infoContent {
				margin-left: 30rpx;

				.infoItem {
					display: flex;
					align-items: center;
					margin-bottom: 42rpx;

					.key {

						font-weight: 400;
						color: rgba(82, 82, 84, 1);
						font-size: 32rpx;
					}

					.value {
						position: absolute;
						left: 265rpx;
						color: rgba(151, 151, 151, 1);
						font-weight: 400;
					}
				}
			}
		}

		// 公户信息  
		.accountInfo {
			position: relative;
			box-sizing: border-box;
			width: 694rpx;
			height: 368rpx;
			opacity: 1;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);

			.title {
				box-sizing: border-box;
				margin-bottom: 30rpx;
				margin-top: 40rpx;
				margin-left: 30rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}

			.infoContent {
				margin-left: 30rpx;

				.infoItem {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.key {

						font-weight: 400;
						color: rgba(82, 82, 84, 1);
						font-size: 32rpx;

					}

					.value {
						position: absolute;
						left: 265rpx;
						color: rgba(151, 151, 151, 1);
						font-weight: 400;
					}
				}
			}
		}


		//提交按钮
		.confirmBtn {
			position: absolute;
			box-sizing: border-box;
			bottom: 90rpx;
			left: 176rpx;
			width: 400rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 26rpx;
			background: rgba(223, 161, 60, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(255, 255, 255, 1);
		}

	}
</style>